<template>
	<div>
		<el-button icon="el-icon-plus" size="mini" type="primary" @click=" dialogFormVisible = true">创建比赛</el-button>
		<el-divider content-position="left"></el-divider>
		<el-alert title="比赛规则" type="warning" description="同时只能进行一场比赛,删除当前比赛之后可以创建新的比赛,比赛评审时间为报名截止日的后一天!!!" show-icon>
		</el-alert>
		<el-table :data="competitionList" stripe style="width: 100%">
			<el-table-column prop="cname" label="比赛名称" width="180">
			</el-table-column>
			<el-table-column prop="startTime" label="开始时间" width="200">
			</el-table-column>
			<el-table-column prop="endTime" label="比赛结束时间">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间">
			</el-table-column>
			<el-table-column label="操作" width="550">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click="getCompetitionResultList(scope.$index, scope.row)">查看比赛结果</el-button>
					<el-button size="mini" type="danger" @click="handleEdit(scope.$index, scope.row)">结束比赛统计成绩</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除本次比赛</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="创建比赛" :visible.sync="dialogFormVisible">
			<el-form :model="competition">
				<el-form-item label="比赛名称" :label-width="formLabelWidth">
					<el-input v-model="competition.cname" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="比赛时间段" :label-width="formLabelWidth">
					<div class="block">
						<div style="display: flex; justify-content: space-between;">
							<el-date-picker v-model="competition.startTime" type="datetime" placeholder="选择比赛开始日期" format="yyyy 年 MM 月 dd 日"
							 value-format="yyyy-MM-dd">
							</el-date-picker>
							<el-date-picker v-model="competition.endTime" type="datetime" placeholder="选择比赛结束日期" format="yyyy 年 MM 月 dd 日"
							 value-format="yyyy-MM-dd">
							</el-date-picker>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="赛制规定" :label-width="formLabelWidth">
					<el-input type="textarea" :rows="6" v-model="competition.detail" auto-complete="off" placeholder="请输入比赛相关规定,至少20字~"></el-input>
				</el-form-item>
				<template style="display: flex; justify-content: space-between;">
					<el-link icon="el-icon-edit">设置参赛作品各项打分占比</el-link>
					<br />
					设计图<el-input-number v-model="competition.comCondition.designPer" :min="20" :max="50" label="设计图" style="margin-left:5.625rem; margin-bottom: 0.3125rem; margin-top: 0.625rem;"></el-input-number>
					<br />
					海报图<el-input-number v-model="competition.comCondition.posterPer" :min="20" :max="50" label="海报图" style="margin-left:5.625rem; margin-bottom: 0.3125rem;"></el-input-number>
					<br />
					网站主题风格<el-input-number v-model="competition.comCondition.themeStylePer" :min="20" :max="50" label="网站主题风格" style="margin-left:3.125rem; margin-bottom: 0.3125rem;"></el-input-number>
					<br />
					网站吸引程度<el-input-number v-model="competition.comCondition.attactionPer" :min="20" :max="50" label="网站吸引程度" style="margin-left:3.125rem; margin-bottom: 0.3125rem;"></el-input-number>
					<br />
					行业调研分析<el-input-number v-model="competition.comCondition.analysisPer" :min="20" :max="50" label="行业调研分析" style="margin-left:3.125rem; margin-bottom: 1.25rem;"></el-input-number>
					<br />
					<el-link icon="el-icon-edit">一等奖占参赛人数百分比</el-link>
					<br />
					<el-input-number v-model="competition.comCondition.firstPrizePer" :min="5" :max="15" label="一等奖占比" style="margin-left:9.375rem; margin-top: 0.3125rem;"></el-input-number>
				</template>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="createCompetition">创建比赛</el-button>
			</div>
		</el-dialog>

		<el-dialog title="比赛结果" :visible.sync="dialogTableVisible">
			<el-table :data="competitionResultList">
				<el-table-column property="worksName" label="作品名" width="150"></el-table-column>
				<el-table-column property="username" label="姓名" width="200"></el-table-column>
				<el-table-column property="gradeName" label="等级"></el-table-column>
				<el-table-column property="averageScore" label="得分"></el-table-column>
				<el-table-column property="phone" label="联系电话"></el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "com-list",
		data() {
			return {
				competitionList: [],
				competitionResultList: [],
				dialogTableVisible: false,
				dialogFormVisible: false,
				competition: {
					cname: "",
					startTime: "",
					endTime: "",
					process: "",
					detail: "",
					comCondition: {
						designPer: 1,
						posterPer: 1,
						themeStylePer: 1,
						attactionPer: 1,
						analysisPer: 1,
						firstPrizePer: 10,
					}
				},

				formLabelWidth: "150px",
				endTime: "",
				howTime: "",
				disabled: true,
				disabled1: true,
			}
		},
		mounted() {
			this.initCompetitionList();
		},

		methods: {
			createCompetition() {
				if (!this.competition.cname || !this.competition.detail || this.competition.detail.length < 20) {
					return this.$notify({
						title: '警告',
						message: '输入比赛完整信息',
						type: 'warning'
					});
				}
				let startTime = new Date(this.competition.startTime).getTime();
				let endTime = new Date(this.competition.endTime).getTime();
				let nowTime = new Date().getTime();
				if (endTime < nowTime) {
					return this.$notify({
						title: '警告',
						message: '报名时间不可晚于当前时间',
						type: 'warning'
					});
				} else if (endTime < startTime) {
					return this.$notify({
						title: '警告',
						message: '结束时间报名不可小于开始报名时间',
						type: 'warning'
					});
				} else if (startTime < nowTime) {
					this.competition.process = "未开始";
				} else if (startTime > nowTime) {
					this.competition.process = "报名中";
				}
				console.log(this.competition);
				this.postRequest("/competition/create", this.competition).then(res => {
					this.dialogFormVisible = false;
					this.competition.cname = "",
						this.competition.startTime = "",
						this.competition.endTime = "",
						this.initCompetitionList();
					this.disabled1 = true;
				})
			},
			initCompetitionList() {
				this.getRequest("/competition/").then(res => {
					if (res) {
						this.competitionList = res.obj;
					}
				})
			},
			// 获取比赛结果，一等奖的个数按照参赛选手人次来动态变化
			getCompetitionResultList(index, row) {
				this.competitionResultList = [];
				this.dialogTableVisible = true;
				this.getRequest("/competition/getCompetitionResultList/?id=" + row.id).then(res=>{
					if(res){
						this.competitionResultList = res.obj;
					}
					return;
				})
			},
			handleEdit(index, row) {
				this.$notify.info({
					title: '消息',
					message: '比赛将于' + row.endTime + '结束'
				});
				this.$confirm('此操作将结束当前比赛, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.putRequest("/works/end/?competitionId=" + row.id).then(res => {
						return;
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					});
				});
			},
			handleDelete(index, row) {
				this.$confirm('危险操作！！！此操作将关闭本次比赛, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.putRequest("/competition/close/?competitionId=" + row.id).then(res => {
						this.initCompetitionList();
						return;
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					});
				});

			}
		},
	}
</script>

<style>
</style>
